import React, { Component } from "react";
import { Swipe } from "react-vant";
import { Icon } from "react-vant";

import ASK from "../images/快速提问.png";
import DOCTOR from "../images/找医生.png";
import HOSPITAL from "../images/找医院.png";
import BUY from "../images/快速购药.png";
import IMAGE from "../images/图文急诊.png";
import PHONE from "../images/快捷电话.png";
import SORROW from "../images/男言之瘾.png";
import TUMOUR from "../images/肿瘤营养.png";
import SKIN from "../images/皮肤难题.png";
import HEALTH from "../images/健康社区.png";
import PUZZLE from "../images/不是难题.png";

export default class homePage extends Component {
  state = {
    iptvalue: "",
  };
  render() {
    const { iptvalue } = this.state;
    const images = [
      "https://img1.baidu.com/it/u=982930916,430043612&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=1474604075,3172391788&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=1779144847,898320374&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=2073343241,2509534685&fm=26&fmt=auto",
    ];
    return (
      <div className="homePage">
        <input
          type="text"
          placeholder="🔍输入关键字搜索科普文章"
          className="search"
        />
        <div className="content">
          <Swipe autoplay={3000} lazy>
            {images.map((item) => (
              <Swipe.Item key={item}>
                <img className="swiper-lazy" src={item} alt="" />
              </Swipe.Item>
            ))}
          </Swipe>
          <div className="menu">
            <dl className="ask">
              <dt>
                <img src={ASK} alt="" />
              </dt>
              <dd>
                <div>快速提问</div>
                <div>只能匹配医生</div>
              </dd>
            </dl>
            <dl className="doctor">
              <dt>
                <img src={DOCTOR} alt="" />
              </dt>
              <dd>
                <div>找医生</div>
                <div>全国60万+名医</div>
              </dd>
            </dl>
          </div>
          <div className="menuList">
            <dl>
              <dt>
                <img src={HOSPITAL} alt="" />
              </dt>
              <dd>找医院</dd>
            </dl>
            <dl>
              <dt>
                <img src={BUY} alt="" />
              </dt>
              <dd>快速购药</dd>
            </dl>
            <dl>
              <dt>
                <img src={IMAGE} alt="" />
              </dt>
              <dd>图文急诊</dd>
            </dl>
            <dl>
              <dt>
                <img src={PHONE} alt="" />
              </dt>
              <dd>快接电话</dd>
            </dl>
          </div>
          <div className="feature">
            <p>
              特色科室
              <span>
                查看全部
                <Icon name="arrow" />
              </span>
            </p>
            <div className="feature-top">
              <div className="top-left">
                <img src={SORROW} alt="" />
              </div>
              <div className="top-right">
                <img src={TUMOUR} alt="" />
                <img src={SKIN} alt="" />
              </div>
            </div>
            <div className="feature-bottom">
              <div className="bottom-left">
                <img src={HEALTH} alt="" />
              </div>
              <div className="bottom-right">
                <img src={PUZZLE} alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
